<%@ page pageEncoding="UTF-8"%>
<%@ include file="../common/head.jsp"%>
<!DOCTYPE html>
<html xmlns="//www.w3.org/1999/xhtml" xml:lang="zh" lang="zh">
<head>
<title>在线练习 ${coursesel }</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta http-equiv="x-dns-prefetch-control" content="on" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache" max-age="0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Expires" content="0" />
<meta name="version" content="1.0" />
<script src="${ctx}/qiantai/static/js/jquery.2.1.4.min.js"></script>
<link rel="stylesheet" href="${ctx}/qiantai/static/css/bbs.css" />
<link rel="stylesheet" href="${ctx }/qiantai/static/css/courseopen.css">
<link rel="stylesheet" href="${ctx }/qiantai/static/css/bootstrap.min.css" />
<link rel="stylesheet" href="${ctx }/qiantai/static/css/font-awesome.min.css" />
<link rel="stylesheet" href="${ctx }/qiantai/static/css/home.css">
<link rel="stylesheet" href="${ctx }/qiantai/static/css/btn.css">
<style type="text/css">
#g-container {
	font-size: 14px;
}

pre {
	word-wrap: break-word;
	word-break: break-all;
	display: block;
	width: 100%;
	white-space: pre-wrap;
}

.link-m1 {
	width: 95%;
	margin-top: 10px;
	margin-left: 8px;
	margin-bottom: 10px;
}

.link-m1 ul li {
	float: left;
	margin: 2px 5px;
	list-style: none;
	display: block;
	height: 50px;
	min-width: 10%;
	background-color: #F5F5F5;
	text-align: center;
	line-height: 50px;
}
</style>
</head>
<body class="">
	<%@ include file="./menu.jsp"%>
	<div id="g-container">
		<div class="row" style="margin-left: 20%; margin-top: 5px">
			<div class="col-xs-8 padding-right-0">
				<div class="panel panel-default topic-list">
					<div class="panel-heading">

						在线练习: ${coursesel} | ${cartype }<br />

					</div>
					<div class="link-m1">
						<ul>
							<c:forEach items="${itemList }" var="qitem">
								<li>
									<a href="${ctx}/com/lianxi.do?coursesel=${coursesel}&qitemId=${qitem.id}">${qitem.qitem }</a>
								</li>
							</c:forEach>
						</ul>
					</div>
					<%
						int questionExamIndex = 1;
					%>
					<input type="hidden" value="${course.id}" name="uid" />
					<ul class="list-group">
						<c:if test="${empty list }">
							<LI class="list-group-item">没有查询到相关信息</LI>
						</c:if>
						<LI class="list-group-item">
							<a class="button orange" href="javascript:;" onclick="jiexi()" style="height: 30px; float: LEFT">题目解析 </a>
							<a class="button blue" href="javascript:;" onclick="shang()" style="height: 30px; float: LEFT; margin-left: 20px">上一题
							</a>
							<a class="button blue" href="javascript:;" onclick="xia()" style="height: 30px; float: LEFT; margin-left: 20px">下一题
							</a>
						</LI>
						<c:forEach items="${list }" var="item" varStatus="vitem">
							<c:if test="${item.quesType=='单选题'}">
								<li class="list-group-item questionli" id="questionli_${vitem.count }" style="display: none">
									<div class="topic">
										<div class="topic-title" style="width: 100%">
											<pre style="width: 100%; float: right; font-size: 14px; font-weight: bold">${vitem.count}/${listSize}、<a
													id="itemTitle_item_${item.id }"> ${item.title }</a>
											</pre>
										</div>
										<div class="" style="width: 100%">
											<input type="radio" name="score_${item.id }" id="item_${vitem.count}" value="A">
											A:
											<pre style="width: 95%; float: right">${item.option1 }</pre>
										</div>
										<div class="topic-title" style="width: 100%;">
											<input type="radio" name="score_${item.id }" id="item_${vitem.count}" value="B">
											B:
											<pre style="width: 95%; float: right">${item.option2 }</pre>
										</div>
										<div class="topic-title" style="width: 100%">
											<input type="radio" name="score_${item.id }" id="item_${vitem.count}" value="C">
											C:
											<pre style="width: 95%; float: right">${item.option3 }</pre>
										</div>
										<div class="topic-title" style="width: 100%">
											<input type="radio" name="score_${item.id }" id="item_${vitem.count}" value="D">
											D:
											<pre style="width: 95%; float: right">${item.option4 }</pre>
										</div>
										<c:if test="${item.imgType=='mp4' }">
											<div style="text-align: center">
												<video width="320" height="240" controls autoplay>
													<source src="${ctx }/resource/${item.imgFile}" type="video/mp4">
													<source src="${ctx }/resource/${item.imgFile}" type="video/ogg">
													<source src="${ctx }/resource/${item.imgFile}" type="video/webm">
													<object data="${ctx }/resource/${item.imgFile}" width="320" height="240">
														<embed src="${ctx }/resource/${item.imgFile}" width="320" height="240">
													</object>
												</video>
											</div>
										</c:if>
										<c:if test="${item.imgType=='img' }">
											<div style="text-align: center">
												<img alt="" src="${ctx}/resource/${item.imgFile}" style="border-radius: 0.1em;" width="420px"
													onerror="javascript:this.src='${ctx}/resource/no.jpg'">
											</div>
										</c:if>
										<div class="topic-title" style="width: 100%; margin-top: 10px; display: none" id="answerdiv_${vitem.count }">
											<span style="color: orange">答案: ${item.answer }</span>
											<span style="color: red; margin-left: 20px">正确率: ${item.percent }%</span>
											<br />
											<pre style="width: 100%; float: right; color: green">${item.jiexi }</pre>
										</div>

									</div>
								</li>
							</c:if>
							<c:if test="${item.quesType=='多选题'}">
								<li class="list-group-item questionli" id="questionli_${vitem.count }" style="display: none">
									<div class="topic">
										<div class="topic-title" style="width: 100%">
											<pre style="width: 100%; float: right; font-size: 14px; font-weight: bold">${vitem.count}/${listSize}、<a
													id="itemTitle_item_${item.id }">${item.title }</a>
											</pre>
										</div>
										<div class="" style="width: 100%">
											<input type="checkbox" name="score_${item.id }" id="item_${vitem.count}" value="A">
											A:
											<pre style="width: 95%; float: right">${item.option1 }</pre>
										</div>
										<div class="topic-title" style="width: 100%;">
											<input type="checkbox" name="score_${item.id }" id="item_${vitem.count}" value="B">
											B:
											<pre style="width: 95%; float: right">${item.option2 }</pre>
										</div>
										<div class="topic-title" style="width: 100%">
											<input type="checkbox" name="score_${item.id }" id="item_${vitem.count}" value="C">
											C:
											<pre style="width: 95%; float: right">${item.option3 }</pre>
										</div>
										<div class="topic-title" style="width: 100%">
											<input type="checkbox" name="score_${item.id }" id="item_${vitem.count}" value="D">
											D:
											<pre style="width: 95%; float: right">${item.option4 }</pre>
										</div>
										<c:if test="${item.imgType=='mp4' }">
											<div style="text-align: center">
												<video width="320" height="240" controls autoplay>
													<source src="${ctx }/resource/${item.imgFile}" type="video/mp4">
													<source src="${ctx }/resource/${item.imgFile}" type="video/ogg">
													<source src="${ctx }/resource/${item.imgFile}" type="video/webm">
													<object data="${ctx }/resource/${item.imgFile}" width="320" height="240">
														<embed src="${ctx }/resource/${item.imgFile}" width="320" height="240">
													</object>
												</video>
										</c:if>
										<c:if test="${item.imgType=='img' }">
											<div style="text-align: center">
												<img alt="" src="${ctx}/resource/${item.imgFile}" style="border-radius: 0.1em;" width="420px"
													onerror="javascript:this.src='${ctx}/resource/no.jpg'">
											</div>
										</c:if>
										<div class="topic-title" style="width: 100%; margin-top: 10px; display: none" id="answerdiv_${vitem.count }">
											<span style="color: orange">答案: ${item.answer }</span>
											<span style="color: red; margin-left: 20px">正确率: ${item.percent }%</span>
											<br />
											<pre style="width: 100%; float: right; color: green">${item.jiexi }</pre>
										</div>
									</div>
								</li>
							</c:if>
							<c:if test="${item.quesType=='判断题'}">
								<li class="list-group-item questionli" id="questionli_${vitem.count }" style="display: none">
									<div class="topic">
										<div class="topic-title" style="width: 100%">
											<pre style="width: 100%; float: right; font-size: 14px; font-weight: bold">${vitem.count}/${listSize}、<a
													id="itemTitle_item_${item.id }">${item.title }</a>
								</pre>
										</div>
										<div class="" style="width: 100%">
											<input type="radio" name="score_${item.id }" id="item_${vitem.count}" value="T">
											正确
											<input type="radio" name="score_${item.id }" id="item_${vitem.count}" value="F">
											错误
										</div>
										<c:if test="${item.imgType=='mp4' }">
											<div style="text-align: center">
												<video width="320" height="240" controls autoplay>
													<source src="${ctx }/resource/${item.imgFile}" type="video/mp4">
													<source src="${ctx }/resource/${item.imgFile}" type="video/ogg">
													<source src="${ctx }/resource/${item.imgFile}" type="video/webm">
													<object data="${ctx }/resource/${item.imgFile}" width="320" height="240">
														<embed src="${ctx }/resource/${item.imgFile}" width="320" height="240">
													</object>
												</video>
											</div>
										</c:if>
										<c:if test="${item.imgType=='img' }">
											<div style="text-align: center">
												<img alt="" src="${ctx}/resource/${item.imgFile}" style="border-radius: 0.1em;" width="420px"
													onerror="javascript:this.src='${ctx}/resource/no.jpg'">
											</div>
										</c:if>
										<div class="topic-title" style="width: 100%; margin-top: 10px; display: none" id="answerdiv_${vitem.count }">
											<span style="color: orange">答案: ${item.answer }</span>
											<span style="color: red; margin-left: 20px">正确率: ${item.percent }%</span>
											<br />
											<pre style="width: 100%; float: right; color: green">${item.jiexi }</pre>
										</div>
									</div>
								</li>
							</c:if>
						</c:forEach>

					</ul>
				</div>
				<!-- 分页 -->
			</div>
			<script type="text/javascript">
			 var total = ${listSize};
			 var currentIndex = 1;
			 $("#questionli_1").show();
			 function jiexi(){
				 tijiao();
				 $("#answerdiv_"+currentIndex).show();
			 }
			 function shang(){
				 if(currentIndex==1){
					 layer.open({
							title : '提示信息',
							content : "没有上一题了"
						});
					 return false; 
				 }
				 $(".questionli").hide();
				 currentIndex=currentIndex-1;
				 $("#questionli_"+currentIndex).show();
				 
			 }
			 function xia(){
				 if(currentIndex==total){
					 layer.open({
							title : '提示信息',
							content : "没有下一题了"
						});
					 return false; 
				 }
				 $(".questionli").hide();
				 currentIndex=currentIndex+1;
				 $("#questionli_"+currentIndex).show();
				 
			 }
			 function tijiao(){
				 var rid = "item_"+currentIndex;
				 var type = $("#"+rid).attr("type");
				 var list = "";
					$('input:'+type+'[id="' + rid + '"]:checked').each(function(){
			           list+=$(this).val();
		            });
				 if (list != "") {
					 var qid = $("#"+rid).attr("name");
					 $.ajax({
				     		url:"${ctx }/com/lianxiAns.do",
				     		contentType:"application/x-www-form-urlencoded;charset=UTF-8",
				     		type:"post",
				     		dataType:"json",
				     		data:{"qid":qid,"ans":list},
				     		success:function(json){
				     		},
				     		error:function(json){}
					});
				 }
			 }
			</script>

		</div>
		<div style="clear: both"></div>
	</div>
	<%@ include file="./msg.jsp"%>

	</div>

</body>
</html>